<template>
	<a-modal
		:open="open"
		@update:open="$emit('update:open', $event)"
		title="部署成功！"
		:footer="null"
		width="500px"
		class="deploy-success-modal"
	>
		<div class="deploy-success-content">
			<div class="success-icon">
				<CheckCircleOutlined />
			</div>
			<h3>应用部署成功！</h3>
			<p>您的应用已经成功部署，现在可以通过以下链接访问：</p>
			<div class="deploy-url" style="margin-bottom: 36px">
				<a-input :value="deployUrl" readonly class="url-input">
					<template #addonAfter>
						<a-button type="link" @click="copyUrl" size="small">复制</a-button>
					</template>
				</a-input>
			</div>
			<div class="deploy-actions">
				<a-button @click="visitSite" type="primary" class="visit-btn">
					<template #icon>
						<ExportOutlined />
					</template>
					访问网站
				</a-button>
				<a-button @click="closeModal" class="close-btn">关闭</a-button>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import { CheckCircleOutlined, ExportOutlined } from '@ant-design/icons-vue'

interface Props {
	open: boolean
	deployUrl: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
	'update:open': [value: boolean]
	'visit-site': []
}>()

// 复制URL
const copyUrl = async () => {
	try {
		await navigator.clipboard.writeText(props.deployUrl)
		message.success('链接已复制到剪贴板')
	} catch (error) {
		console.error('复制失败:', error)
		message.error('复制失败，请手动复制')
	}
}

// 访问网站
const visitSite = () => {
	emit('visit-site')
}

// 关闭弹窗
const closeModal = () => {
	emit('update:open', false)
}
</script>

<style scoped lang="scss">
.deploy-success-modal {
	:deep(.ant-modal-content) {
		border-radius: 12px;
	}

	.deploy-success-content {
		text-align: center;
		padding: 20px;

		.success-icon {
			font-size: 48px;
			color: #52c41a;
			margin-bottom: 16px;
		}

		h3 {
			font-size: 20px;
			font-weight: 600;
			color: #2d3748;
			margin-bottom: 12px;
		}

		p {
			color: #666;
			margin-bottom: 24px;
			line-height: 1.6;
		}

		.deploy-url {
			.url-input {
				:deep(.ant-input) {
					font-family: 'Courier New', monospace;
					font-size: 13px;
					color: #1890ff;
				}
			}
		}

		.deploy-actions {
			display: flex;
			gap: 24px;
			justify-content: center;

			.visit-btn {
				min-width: 120px;
				height: 44px;
				border-radius: 8px;
				font-weight: 500;
				font-size: 14px;
				background: linear-gradient(135deg, #1890ff, #096dd9);
				border: none;
				box-shadow: 0 3px 12px rgba(24, 144, 255, 0.35);
			}

			.close-btn {
				min-width: 120px;
				height: 44px;
				border-radius: 8px;
				font-weight: 500;
				font-size: 14px;
				border: 1px solid #d9d9d9;
				color: #666;
				background: #fff;
			}
		}
	}
}
</style>
